﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {

    interface StepperCellTypeParam {
        DefaultValue: any;
        min: string;
        max: string;
        step: string;
        buttonSize: number;
        decimalLength: number;
        placeholder: string;
        theme: string;
        integer: boolean;
        allowEmpty: boolean;
        showInput: boolean;
        showPlus: boolean;
        showMinus: boolean;
        IsDisabled: boolean;
        disableInput: boolean;
        longPress: boolean;
    }

    export class StepperCellType extends VantCellTypeBase<StepperCellTypeParam> {
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;
            const option = {
                template: `
<van-stepper
    class="fgc-vant-stepper"
    v-model="value"
    :min="min"
    :max="max"
    :step="step"
    :decimal-length="decimalLength"
    :placeholder="placeholder"
    :theme="theme"
    :integer="integer"
    :allow-empty="allowEmpty"
    :show-input="showInput"
    :show-plus="showPlus"
    :show-minus="showMinus"
    :disabled="disabled"
    :disable-input="disableInput"
    :long-press="longPress"
    :button-size="buttonSize + 'px'"
    :default-value="''"
    @plus="commitValue"
    @minus="commitValue"
    @blur="commitValue"
>
</van-stepper>
`,
                data() {
                    return {
                        value: undefined,
                        min: self.calcNumber(cellType.min),
                        max: self.calcNumber(cellType.max),
                        step: self.calcNumber(cellType.step),
                        buttonSize: self.calcNumber(cellType.buttonSize),
                        decimalLength: self.calcNumber(cellType.decimalLength),
                        placeholder: cellType.placeholder,
                        theme: cellType.theme,
                        integer: !!cellType.integer,
                        allowEmpty: !!cellType.allowEmpty,
                        showInput: !!cellType.showInput,
                        showPlus: !!cellType.showPlus,
                        showMinus: !!cellType.showMinus,
                        disabled: !!cellType.IsDisabled,
                        disableInput: !!cellType.disableInput,
                        longPress: !!cellType.longPress,
                    };
                },
                methods: {
                    getValue() {
                        return this.value;
                    },
                    setValue(value: any) {
                        this.value = self.isEmpty(value) ? "" : value;
                    },
                    disable() {
                        this.disabled = true;
                    },
                    enable() {
                        this.disabled = false;
                    },
                    commitValue() {
                        Vue.nextTick(() => {
                            self.commitValue();
                            self.validate();
                        });
                    }
                },
                mounted() {
                    self.fontDom = $(".van-stepper__input", self.container);
                }
            };

            this.createVueApp(option);

            this.onDependenceCellValueChanged(() => {
                const { min, max, step } = <StepperCellTypeParam>this.CellElement.CellType;
                this.vue.min = this.calcNumber(min);
                this.vue.max = this.calcNumber(max);
                this.vue.step = this.calcNumber(step);
            });

            this._inputTextCache = this.getValueFromElement()?.toString();
            this.getContainer().keyup(() => {
                if (this._inputTextCache !== this.getValueFromElement()?.toString()) {
                    this.hideValidateTooltip();
                }
                this._inputTextCache = this.getValueFromElement()?.toString();
            });

            super.onPageLoaded(info);
        }
        private _inputTextCache: string;

        // runtime methods
        public SetMinValue(value) {
            this.vue.min = Number(value);
        }
        public SetMaxValue(value) {
            this.vue.max = Number(value);
        }
        public SetStepSize(value) {
            this.vue.step = Number(value);
        }
        public SetFocus() {
            $(`#${this.uId}`).find(".van-stepper__input").focus();
        }
        // 支持本体的设置焦点命令
        public setFocus() {
            this.SetFocus();
        }
        public hasFocus() {
            const dom = $(`.van-stepper__input`, this.getContainer());
            return dom.length && document.activeElement === dom[0];
        }
        public setValueToElement(jElement: JQuery, value: any) {
            super.setValueToElement(jElement, value);
            this._inputTextCache = this.getValueFromElement()?.toString();
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Stepper, Vant", VantCellTypes.StepperCellType);